<template>
  <component
    :is="getComponent(item.type, item.component, item.widget)"
    v-bind="vBind"
    :placeholder="item.placeholder || getPlaceholder(item)"
    v-model="comVal"
    :ref="generateRef(item)"
    :disabled="item.disabled"
    v-model:formData="localData"
    @close-and-refresh="emitCloseAndRefresh(item.type)"
    @close-and-set="
      (data) => {
        emitCloseAndSet(item.type, data);
      }
    "
  />
</template>
<script>
import emitsMixin from '../../mixins/emitsMixin';
export default {
  name: 'CustomCompItem',
  mixins: [emitsMixin],
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    params: {
      type: Object,
      default: () => {
        return {};
      }
    },
    modelValue: {
      type: [String, Number, Boolean, Array],
      default: ''
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      localData: {},
      comVal: ''
    };
  },
  computed: {
    vBind() {
      const vBind = Object.assign(this.deepClone(this.item), this.deepClone(this.params), {
        size: this.item.size || 'default',
        dic: this.params.dicData ? this.params.dicData : this.item.dicData ? this.item.dicData : undefined,
        rules: this.item.pattern
          ? this.item.rules.map((r) => {
              if (r.pattern) r.pattern = new RegExp(this.item.pattern);
              return r;
            })
          : this.item.rules,
        column: this.item.column ? this.item.column : this.item
      });
      // let event = ['change', 'blur', 'click', 'focus', 'control', 'appendClick', 'uploadAfter'];
      // event.forEach((e) => delete vBind[e]);
      if (vBind.event) delete vBind.event;
      // 避免className对组件样式产生影响
      if (vBind.className) delete vBind.className;
      // 避免title对表格元素产生影响
      if (vBind.type == 'anvilTable' && vBind.title) delete vBind.title;
      return vBind;
    }
  },
  watch: {
    modelValue: {
      handler(newVal, oldVal) {
        this.comVal = newVal;
      },
      immediate: true
    },
    comVal: {
      handler(newVal, oldVal) {
        this.$emit('update:modelValue', newVal);
      }
    },
    formData: {
      handler(newVal, oldVal) {
        this.localData = newVal;
      },
      immediate: true,
      deep: true
    },
    localData: {
      handler(newVal, oldVal) {
        this.$emit('update:formData', newVal);
      },
      deep: true
    },
    item: {
      handler(newVal, oldVal) {},
      deep: true
    },
    params: {
      handler(newVal, oldVal) {},
      deep: true
    }
  },
  methods: {
    getComponent(type, component, widget) {
      // debugger
      let KEY_COMPONENT_NAME = 'avue-';
      let result = 'input';
      if (component) return component;
      else if (['array', 'img', 'url'].includes(type)) result = 'array';
      else if (type === 'select') result = 'select';
      else if (type === 'selects') result = 'select';
      else if (type === 'radio') result = 'radio';
      else if (type === 'checkbox') result = 'checkbox';
      else if (['time', 'timerange'].includes(type)) result = 'time';
      else if (['dates', 'date', 'datetime', 'datetimerange', 'daterange', 'week', 'month', 'year'].includes(type)) result = 'date';
      else if (type === 'cascader') result = 'cascader';
      else if (type === 'number') result = 'input-number';
      else if (type === 'counter') result = 'input-number';
      else if (type === 'password') result = 'input';
      else if (type === 'switch') result = 'switch';
      else if (type === 'rate') result = 'rate';
      else if (type === 'upload') result = 'upload';
      else if (type === 'slider') result = 'slider';
      else if (type === 'dynamic') result = 'dynamic';
      else if (type === 'icon') result = 'input-icon';
      else if (type === 'color') result = 'input-color';
      else if (type === 'map') result = 'input-map';
      else if (type === 'primary') result = 'primary';
      else if (type === 'text') result = 'text';

      return widget ? type : KEY_COMPONENT_NAME + result;
    },
    getPlaceholder(item) {
      const label = item.label ? item.label : '';
      if (['select', 'selects', 'checkbox', 'radio', 'tree', 'color', 'dates', 'date', 'datetime', 'datetimerange', 'daterange', 'week', 'month', 'year', 'map', 'icon'].includes(item.type))
        return `请选择 ${label}`;
      else return `请输入 ${label}`;
    },
    validateDynamic(ruleIds) {
      if (this.$refs.dynamicItem) {
        return this.$refs.dynamicItem.validateForm(ruleIds);
      } else {
        return [];
      }
    },
    validateGrid() {
      if (this.$refs.gridItem) {
        return this.$refs.gridItem.validate();
      } else {
        return [];
      }
    },
    validateTabs() {
      if (this.$refs.tabsItem) {
        return this.$refs.tabsItem.validate();
      } else {
        return [];
      }
    },
    resetGrid() {
      if (this.$refs.gridItem) {
        this.$nextTick(() => {
          this.$refs.gridItem.resetForm();
        });
      }
    },
    // 根据组件类型生成ref
    generateRef(item) {
      switch (item.type) {
        case 'anvilDynamic':
          return 'dynamicItem';
        case 'grid':
          return 'gridItem';
        case 'anvilTabs':
          return 'tabsItem';
        default:
          return undefined;
      }
    }
  }
};
</script>
